<template>
  <div v-show="u2" class="gwc">
    <div @click="off" class="gwc_1">×</div>
		<!-- 预显示图片 -->
		<div class="gwc_2">
			<img :src="Selected?Selected.img:''" >
		</div>
    <div class="gwc_3">
      <img src="" alt="">
      <span>新价格</span>
      <span>旧价格</span>
      <span>库存</span>
    </div>
    <div class="gwc_4">
      <div>尺码</div>
      <span v-for="(item,index) in chima" :key="index+'z'" :data-size="item" @click="getSize($event)">{{item}}</span>
    </div>
    <div class="gwc_5">
      <div>颜色</div>
      <span v-for="(item1,index) in yanse" :key="index" :data-Color="item1" @click="getColor($event)">{{item1}}</span>
    </div>
    <div>
      <button>-</button>
      <input type="text" name="" id="">
      <button>+</button>
    </div>
    <div>
      <button @click="cart">加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    Skus:{
      type:Array
    },
    chima:{
      type:Array
    },
    yanse:{
      type:Array
    },
  },
  data(){
    return{
      u2:false,
			sku:[null,null],
			Selected:{}//用户当前选择的SKU
    }
  },
  mounted(){
    this.$bus.$on('Skuu',()=>{
      this.u2= true
    })
  },
  methods:{
    off(){
      this.u2=false
    },
    getSize(e){
			this.sku[0]=e.target.getAttribute('data-size')
			this.l1()
			
		},
		getColor(e){
			this.sku[1]=e.target.getAttribute('data-color')
			console.log(this.sku[1]);
			this.l1()
		},
		cart(){
			let a1=this.sku.every(res=>res!=null)
			if(a1){
				console.log("可以");
				let p1=this.l1()
				this.$store.commit("addCart",p1)
			}else{
				alert("请完善尺码选择")
			}
		},
		l1(){//从Skus中筛选出用户所选择款式对应的价格和相关信息
		  let a1=this.sku.every(res=>res!=null)
		  if(a1){
				let sku=this.sku
			  let index=this.Skus.findIndex(v=>v.size==sku[0] && v.style==sku[1])
				this.Selected=this.Skus[index]
				return this.Skus[index]
			}
		}
  },
}
</script>

<style scoped>
.gwc{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8;
  background-color: beige;
	font-size: 20px;
}
.gwc_1{
	width: 20px;
	height: 20px;
	font-size: 37px;
	float: right;
	margin-right: 10px;
	margin-top: 2px;
}
.gwc_2{
	margin-top: 42.55px;
}
</style>